<template>
  <!--pages/post/post.wxml-->
  <view class="container" :class="isDopdown ? 'showDrodwon' : ''">
    <mineNavbar :styleData="styleData"> </mineNavbar>

    <view>
      <view class="catetory">
        <view v-for="item in workTypeArr" :key="item.value" @click="changeWorkType(item)">
          <view :class="positionType === item.value ? 'active' : 'common'">{{
            item.label
          }}</view>
          <image src="@/static/images/recruit/wan.png" mode="" v-if="positionType === item.value" />
        </view>
      </view>

      <view class="c_search">
        <view class="middle">
          <input type="text" v-model="form.seUserName" placeholder="查找人才" />
        </view>
        <view class="right" @click="handleConfirm(form)">
          <image src="@/static/images/recruit/search.png" mode="" />
        </view>
      </view>

      <view class="c_select" style="display: flex; justify-content: space-between">
        <view class="left">
          <view v-for="item in selectArr" :key="item" @click="changeSelectWork(item)">
            <text>{{ item }}</text>
            <image src="@/static/images/recruit/up1.png" mode="" v-if="isshowUp === item" />
            <image src="@/static/images/recruit/up.png" mode="" v-else />
          </view>
        </view>

        <pullDown class="dropDown" v-show="isDopdown" :isshowUp="isshowUp" @handleCancel="handleCancel"
          @handleConfirm="handleConfirm" />
        <!-- 分类部分 -->
      </view>

      <noList v-if="list.length === 0" />
      <view v-else class="c_workList">
        <scroll-view scroll-y style="height: 68vh" @scrolltolower="scrollBottom">
          <talentsData :list="list" />
          <uni-load-more :status="status" :content-text="contentText"></uni-load-more>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import { getTalentsListAPI } from "@/api/subPage/mine.js";

import pullDown from "./components/pullDown";
import talentsData from "./components/talentsData.vue";
export default {
  components: {
    pullDown,
    talentsData,
  },
  data() {
    return {
      styleData: {
        show: true,
        // background: "#fff",
      },

      workTypeArr: [
        { label: "已收藏", value: "5" },
        { label: "已申请", value: "0" },
        { label: "不录用", value: "1" },
        { label: "已录用", value: "2" },
        { label: "已到岗", value: "3" },
      ],

      positionType: "5",
      workTypeList: [],

      selectArr: ["位置", "筛选"],
      isshowUp: "分类", //选中的字段
      isShowIcon: true,
      isDopdown: false,
      longitude: "",
      latitude: "",

      form: {
        pageNum: 1,
        pageSize: 10,
        status: "0",
        seUserName: '',
        city: '',
        educationTypes: [],
        enterpriseScales: '',
        sortType: '',
        startSalary: '',
        endSalary: '',
        industryId: '',
        priceValue: '',
      },
      // 总条数
      total: 0,

      // 数据
      list: [],
      //
      loading: false,
      status: "more",

      contentText: {
        contentdown: "没有更多数据了",
      },
    };
  },
  computed: {},
  watch: {},
  async onLoad(options) { },
  async onShow() { },
  onReady() { },
  mounted() { },
  created() {
    this.getListFn();
  },
  methods: {
    async getListFn() {

      this.form.status = this.positionType;
      const res = await getTalentsListAPI(this.form);

      this.list = res.rows;
      this.total = res.total;
    },

    changeWorkType(e) {
      this.form.status = e.value;
      this.positionType = e.value;
      this.getListFn();
    },
    // 筛选
    changeSelectWork(e) {
      if (this.isshowUp === e) {
        this.isDopdown = !this.isDopdown;
      } else {
        this.isDopdown = true;
        this.isshowUp = e;
      }
    },

    // 切换岗位的显示方式
    changleWorkType() {
      this.isShowIcon = !this.isShowIcon;
    },

    // 取消
    handleCancel(e) {
      this.isDopdown = e;
    },
    // 确认
    handleConfirm(e) {
      console.log(e);
      this.form.city = e.city;
      this.form.educationTypes = e.educationTypes;
      this.form.workExperiences = e.workExperiences;
      this.form.industryId = e.industryId;
      this.form.sortType = e.sortType;
      this.form.startSalary = e.startSalary;
      this.form.endSalary = e.endSalary;
      this.form.priceValue = e.priceValue;

      this.isDopdown = false;
      this.getListFn();
    },

    async scrollBottom() {
      if (this.list.length >= this.total) return;
      if (this.loading) return;
      this.form.pageNum++;
      this.status = "loading";
      this.loading = true;
      const { rows } = await getTalentsListAPI(this.form);
      this.status = "more";
      this.loading = false;
      this.list = [...this.list, ...rows];
    },
  },
};
</script>
<style lang="scss" scoped>
.showDrodwon {
  height: 100vh;
  overflow: hidden;
}

.container {
  padding: 0;
  font-size: 28rpx;
  background: #fff;

  .catetory {
    width: 100%;
    height: 120rpx;
    display: flex;
    justify-content: space-around;

    >view {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .active {
        font-weight: 900;
        font-size: 32rpx;
        color: #000;
      }
    }

    image {
      width: 35rpx;
      height: 6px;
      margin-top: 5px;
    }
  }

  .c_search {
    width: 700rpx;
    height: 35px;
    background-color: #f8f8f8;
    border-radius: 75px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    margin: 0 32rpx;
    position: relative;

    .c_picker {
      width: 20%;
    }

    .left {
      display: flex;

      justify-content: center;
      align-items: center;

      position: relative;
      margin-left: 10px;

      >text {
        margin-right: 5px;
      }
    }

    .left::after {
      content: "";
      position: absolute;
      top: 50%;
      right: 0px;
      transform: translateY(-50%);
      width: 1px;
      background-color: #00000033;
      height: 10px;
    }

    .middle {
      width: 69%;
      margin-left: 20px;
    }

    .right {
      width: 10%;

      image {
        width: 14px;
        height: 14px;
      }
    }

    .iconfont {
      transform: rotate(-90deg);
      font-size: 10px;
      color: #ccc;
    }
  }

  .c_select {
    width: 100%;
    height: 88rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    border-bottom: 20rpx solid #f9f9f9;

    .dropDown {
      position: absolute;
      top: 90rpx;
      left: 0;
      z-index: 99;
    }

    >view {
      display: flex;
      height: 100%;
      justify-content: space-between;
      align-items: center;
    }

    .left {
      width: 100%;

      >view {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;

        >text {
          margin-right: 5px;
        }

        image {
          width: 14rpx;
          height: 8px;
        }
      }
    }

    .right {
      width: 10%;
      justify-content: center;
    }

    image {
      width: 48rpx;
      height: 48rpx;
    }

    .classify {
      position: absolute;
      top: 88rpx;
      left: 0;
      width: 100%;
      background: #fff;

      >view {
        display: flex;
      }

      .left {
        width: 200rpx;
        background: #d8d8d85c;
        color: #00000073;

        >view {
          width: 100%;
          height: 120rpx;
        }

        .active {
          background-color: #fff;
          color: #000;
        }
      }

      .right {
        width: calc(100% - 200rpx);
        display: flex;
        flex-wrap: wrap;

        >view {
          width: 162rpx;
          height: 65rpx;
          border-radius: 32rpx;
          background-color: #ff9e24;
          color: #fff;
          text-align: center;
          line-height: 65rpx;
          margin-left: 14rpx;
        }
      }
    }
  }

  .c_workList {
    background: #f9f9f9;
  }
}
</style>
